<template>
    <ul class="action">
        <li>
            <el-tooltip content="背景颜色" placement="left">
                <span class="color">
                    <el-color-picker v-model="node.style.fill" @change="getColor" />
                </span>
            </el-tooltip>
        </li>
        <li>
            <el-tooltip content="文字颜色" placement="left">
                <span class="color">
                    <el-color-picker v-model="node.labelCfg.style.fill" @change="getColor" />
                </span>
            </el-tooltip>
        </li>
        <li v-for="item in actionIcon" :key="item.id" @click="change(item)">
            <el-tooltip :content="item.name" placement="left">
                
                <svg-icon :class="`icon ${item.class || ''}`" :name="item.icon"></svg-icon>
            </el-tooltip>
        </li>
    </ul>
</template>

<script lang='ts' setup>
interface IProps {
    node: any,
}
const emit = defineEmits(["change"])
const props = defineProps<IProps>()
// 节点配置项
let actionIcon = [
    {
        "id": "1770588",
        "name": "添加文字",
        "icon": "wenzi",
        "type": "text-add",
        "model": ''
    },
    {
        "id": "19668957",
        "name": "高度增加",
        "icon": "colum-height",
        "type": "size",
        "model": '',
        // 操作
        "action": (node: any) => {
            if (typeof node.size === 'number') {
                node.size += 5
            } else {
                node.size[1] += 5
            }
        }
    },
    {
        "id": "19668951237",
        "name": "宽度增加",
        "icon": "column-width",
        "type": "size",
        "model": '',
        // 操作
        "action": (node: any) => {
            if (typeof node.size === 'number') {
                node.size += 5
            } else {
                node.size[0] += 5
            }
        }
    },
    {
        "id": "196689231251237",
        "name": "高度减小",
        "icon": "suoxiao02",
        "type": "size",
        "model": '',
        "class": "suoxiao",
        // 操作
        "action": (node: any) => {
            if (typeof node.size === 'number') {
                node.size <= 5 ? node.size = 5 : node.size -= 5
            } else {
                node.size[1] <= 10 ? node.size[1] = 10 : node.size[1] -= 5
            }
        }
    },
    {
        "id": "196689231251237",
        "name": "宽度减小",
        "icon": "suoxiao02",
        "type": "size",
        "class": "suoxiao1",
        "model": '',
        // 操作
        "action": (node: any) => {
            if (typeof node.size === 'number') {
                node.size <= 5 ? node.size = 5 : node.size -= 5
            } else {
                node.size[0] <= 10 ? node.size[0] = 10 : node.size[0] -= 5
            }
        }
    },
    {
        "id": "4322432",
        "name": "字体增加",
        "icon": "zitijiada",
        "type": "size",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.style.fontSize += 2
        }
    },
    {
        "id": "231312",
        "name": "字体减小",
        "icon": "zitijianxiao",
        "type": "size",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.style.fontSize <= 12 ? '' : node.labelCfg.style.fontSize -= 2
        }
    },
]
const change = (item: any) => {
    if (item.type === 'text-add') {
        emit('change', item)
        return
    }
    item.action(props.node)

    emit('change', props.node)
}
// 获取颜色
const getColor = (color: string, item: any) => {
    emit('change', props.node)
}
</script>

<style scoped>

</style>